<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="/favicon.ico" rel="icon">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Vite App</title>
  <style>
      html,
      body,
      #app {
          height: 100%;
          margin: 0px;
          padding: 0px;
      }

      #loader-wrapper {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 999999;
          background-color: #316C72FF;
      }

      #loader {
          display: block;
          position: relative;
          left: 50%;
          top: 50%;
          width: 150px;
          height: 150px;
          margin: -75px 0 0 -75px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-top-color: #FFF;
          -webkit-animation: spin 2s linear infinite;
          -ms-animation: spin 2s linear infinite;
          -moz-animation: spin 2s linear infinite;
          -o-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
          z-index: 1001;
      }

      .loading,
      .loading > div {
          position: relative;
          box-sizing: border-box;
      }

      .loading {
          display: block;
          font-size: 0;
          color: #fff;
      }

      .loading.la-dark {
          color: #333;
      }

      .loading > div {
          display: inline-block;
          float: none;
          background-color: currentColor;
          border: 0 solid currentColor;
      }

      .loading {
          left: 50%;
          top: 50%;
          margin: -75px 0 0 -75px;
          width: 100px;
          height: 100px;
      }

      .loading > div:nth-child(1) {
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 1;
          width: 60%;
          height: 60%;
          background: #aaa;
          border-radius: 100%;
          transform: translate(-50%, -50%);
          animation: ball-atom-shrink 4.5s infinite linear;
      }

      .loading > div:not(:nth-child(1)) {
          position: absolute;
          left: 0;
          z-index: 0;
          width: 100%;
          height: 100%;
          background: none;
          animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
      }

      .loading > div:not(:nth-child(1)):before {
          position: absolute;
          top: 0;
          left: 0;
          width: 20px;
          height: 20px;
          margin-top: -5px;
          margin-left: -5px;
          content: "";
          background: currentColor;
          border-radius: 50%;
          opacity: 0.75;
          animation: ball-atom-position 1.5s 0s infinite ease,
          ball-atom-size 1.5s 0s infinite ease;
      }

      .loading > div:nth-child(2) {
          animation-delay: 0.75s;
      }

      .loading > div:nth-child(2):before {
          animation-delay: 0s, -1.125s;
      }

      .loading > div:nth-child(3) {
          transform: rotate(120deg);
          animation-delay: -0.25s;
      }

      .loading > div:nth-child(3):before {
          animation-delay: -1s, -0.75s;
      }

      .loading > div:nth-child(4) {
          transform: rotate(240deg);
          animation-delay: 0.25s;
      }

      .loading > div:nth-child(4):before {
          animation-delay: -0.5s, -0.125s;
      }

      @keyframes ball-atom-position {
          50% {
              top: 100%;
              left: 100%;
          }
      }

      #loader-wrapper .load_title {

          font-family: 'Open Sans';
          color: #FFF;
          font-size: 19px;
          width: 100%;
          text-align: center;
          z-index: 9999999999999;
          position: absolute;
          top: 60%;
          opacity: 1;
          line-height: 30px;
          display: inline-block;
      }

      #loader-wrapper .load_title span {
          top: 10px; /*字符上下浮动*/
          position: relative;
          animation: loading 1s ease 0s infinite alternate; /*引用动画*/
          /* animation: 动画名称 动画时间 动画曲线 何时开始 播放次数 是否反方向;
          alternate:表示动画先正常运行再反方向运行，并持续交替
          infinite:表示无限循环*/
          font-size: 19px;
          color: white;
      }

      #loader-wrapper .load_title span:nth-child(2) {
          animation-delay: 0.1s;
      }

      #loader-wrapper .load_title span:nth-child(3) {
          animation-delay: 0.2s;
      }

      #loader-wrapper .load_title span:nth-child(4) {
          animation-delay: 0.3s;
      }

      #loader-wrapper .load_title span:nth-child(5) {
          animation-delay: 0.4s;
      }

      #loader-wrapper .load_title span:nth-child(6) {
          animation-delay: 0.5s;
      }

      #loader-wrapper .load_title span:nth-child(7) {
          animation-delay: 0.6s;
      }

      #loader-wrapper .load_title span:nth-child(8) {
          animation-delay: 0.7s;
      }

      #loader-wrapper .load_title span:nth-child(9) {
          animation-delay: 0.8s;
      }

      #loader-wrapper .load_title span:nth-child(10) {
          animation-delay: 0.9s;
      }

      #loader-wrapper .load_title span:nth-child(11) {
          animation-delay: 1s;
      }

      #loader-wrapper .load_title span:nth-child(12) {
          animation-delay: 1.1s;
      }

      #loader-wrapper .load_title span:nth-child(13) {
          animation-delay: 1.2s;
      }

      #loader-wrapper .load_title span:nth-child(14) {
          animation-delay: 1.3s;
      }

      @keyframes loading { /* 定义动画*/
          100% {
              top: -10px; /*字符上下浮动*/
              /*上升的时候阴影要在文字下面一些，所以垂直阴影的位置坐标和模糊距离要大一些*/
          }
      }
  </style>
</head>
<body>
<div id="app">
  <div id="loader-wrapper">

    <div class="loading">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="load_title">
      <span
        class="title_1">正</span><span>在</span><span>加</span><span>载</span><span>系</span><span>统</span><span>资</span><span>源</span><span>，</span><span>请</span><span>耐</span><span>心</span><span>等</span><span>待</span>
    </div>
  </div>
</div>
<script src="/src/main.ts" type="module"></script>
</body>
</html>
